<template>
  <div>
    <van-nav-bar title="地图找房" left-arrow @click-left="$router.back()" fixed z-index="9999"/>
    <div id="container"></div>
  </div>
</template>

<script>
import { realRstate } from '@/api/area'
import { changeValue } from '@/utils/storage'
export default {
  name: 'MapPage',
  components: {},
  props: {},
  data () {
    return {}
  },
  watch: {},
  computed: {},
  created () {
  },
  async mounted () {
    const toast = this.$toast.loading({
      duration: 0,
      message: '加载中...',
      forbidClick: true,
      loadingType: 'spinner'
    })
    const { data: { body } } = await realRstate()
    if (body) {
      toast.clear()
    }
    console.log(body)
    const { BMapGL } = window
    const map = new BMapGL.Map('container')
    const point = new BMapGL.Point(116.404, 39.915)
    map.centerAndZoom('北京', 10) // 初始化地图,设置中心点坐标和地图级别
    map.centerAndZoom(point, 15)
    const scaleCtrl = new BMapGL.ScaleControl() // 添加比例尺控件
    map.addControl(scaleCtrl)
    const zoomCtrl = new BMapGL.ZoomControl() // 添加缩放控件
    map.addControl(zoomCtrl)
    const cityCtrl = new BMapGL.CityListControl() // 添加城市列表控件
    map.addControl(cityCtrl)
    // ------------------
    body.forEach(el => {
      const opts = {
        position: new BMapGL.Point(el.coord.longitude, el.coord.latitude), // 指定文本标注所在的地理位置
        offset: new BMapGL.Size(30, -30) // 设置文本偏移量
      }
      // 创建文本标注对象
      const label = new BMapGL.Label(`${el.label + el.count}套`, opts)
      // 自定义文本标注样式
      label.setStyle({
        color: '#ffffff',
        borderRadius: '50%',
        borderColor: '#d3f1e2',
        backgroundColor: '#1fb975',
        fontSize: '12px',
        width: '60px',
        height: '60px',
        lineHeight: '60px',
        textAlign: 'center',
        fontFamily: '微软雅黑'
      })
      map.addOverlay(label)
      label.addEventListener('click', function () {
        changeValue(el.value)
        const point = new BMapGL.Point(el.coord.longitude, el.coord.latitude)
        map.centerAndZoom(point, 14)
        map.clearOverlays()
      })
    })
  }

}
</script>
<style lang="less" scoped>
html {
  height: 100%;
}
body {
  height: 100%;
  margin: 0px;
  padding: 0px;
}
#container {
  width: 100%;
  height: 100vh;
}
</style>
